<template>
	<div class="app-container">
		<div class=" pt25">
			<el-row :gutter="20" >
			  <el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16">
				  <div class="bgWhite radius8 pb30">
					 <div class="pl20 border-bottom pb25 pt25 flex col-center row-between pr20">
					 	<span class="fb fs16">{{info.title}}</span>
						<span class="color2 fs16">{{info.createTime}}  浏览数({{info.viewCount || 0}})</span>
					 </div>
					 <div class="plr20 pb30 color2 pt20" style="line-height: 30px;"
					 v-html="info.content"
					 >
					 </div>
				  </div>
			  </el-col>
			  <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
				  <div class="bgWhite radius8">
					 <div class="pl20 fb fs16 border-bottom pb25 pt25">
					 	热门秘籍
					 </div>
					 <div class="plr20 pb25">
					 	<div class="border-bottom pb30 mt20" 
					 	v-for="(item,i) in hotList" :key="i" @click="handleDetail(item)">
					 		<div class="cursor">
					 			<div class="fs16 fb">{{item.title}}</div>
					 			<div class="fs14 color2 mt10 text-line-1">{{item.description}}</div>
					 		</div>
					 	</div>
					 </div>
				  </div>
			  </el-col>
			</el-row>
		</div>	
	</div>
</template>

<script>
	import {
		cheatsDetail,
		cheatsList
	} from '@/api/business/screct.js'
	export default{
		data(){
			return{
				id:'',
				info:{},
				hotList:[]
			}
		},
		created() {
			this.id = this.$route.params.sortId ? this.$route.params.sortId : ''
			this.getHotList()
		},
		methods:{
			getDetail(){
				cheatsDetail(this.id).then(res=>{
					this.info = res.data
				})
			},
			handleDetail(item){
				this.$tab.closePage();
				setTimeout(()=>{
					this.$router.push('/sort/sortDetail/' + item.id)
				},200)
			},
			//热门秘籍
			getHotList() {
				let data = {
					pageNum: 1,
					pageSize: 10,
				}
				cheatsList(data).then(res => {
					this.hotList = res.rows
					this.getDetail()
				})
			},
		}
	}
</script>

<style>
</style>